<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义过渡类</title>
    <link rel="stylesheet" href="./css/animation.css">
    <style>
        .container {
            width: 600px;
            height: 300px;
            background-color: rgb(236, 245, 226);
            margin: 50px auto 0;
            text-align: center;
            overflow: hidden;
        }

        .tata-leave {}

        .tata-leave-to {
            opacity: 0;
            transform: scale(0);
        }

        .tata-leave-active {
            transition: 2s;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="container">
            <div>
                <button @click='show=!show'>过渡</button>
            </div>
            <transition name='tata' 
                leave-active-class="animated rotateOutDownLeft"
                enter-active-class="animated flipInX " 
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter" 
                v-on:before-leave="beforeLeave"
                v-on:leave="leave"
                v-on:after-leave="afterLeave"
                appear

                appear-active-class="animated rollIn"
                >
                <h2 v-if="show">看我变变变</h2>
            </transition>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: true
            },
            methods: {
                // --------
                // 进入中
                // --------
                print(){
                    console.log('打印函数')
                },
                beforeEnter: function (el) {
                    // ...
                    console.log('过渡进入之前')
                    console.log(el)
                },
                // 当与 CSS 结合使用时
                // 回调函数 done 是可选的
                enter: function (el) {
                    // ...
                    console.log('进入过渡中')
                    
                },
                afterEnter: function (el) {
                    // ...
                    console.log('进入完成')
                },
                enterCancelled: function (el) {
                    // ...
                },

                // --------
                // 离开时
                // --------

                beforeLeave: function (el) {
                    // ...
                },
                // 当与 CSS 结合使用时
                // 回调函数 done 是可选的
                leave: function (el ) {
                    // ...
                    
                },
                afterLeave: function (el) {
                    // ...
                },
                // leaveCancelled 只用于 v-show 中
                leaveCancelled: function (el) {
                    // ...
                }
            }
        })
    </script>
</body>

</html>